<template>
	<view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">

			<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.name" placeholder="请填写姓名" border="none"></u--input>
			</u-form-item>

			<u-form-item label="学号" prop="userInfo.studentID" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.studentID" placeholder="请填写学号" border="none"></u--input>
			</u-form-item>

			<u-form-item label="电话" prop="userInfo.phone" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.phone" placeholder="请填写" border="none"></u--input>
			</u-form-item>

			<u-form-item label="报修区域" prop="userInfo.area" borderBottom @click="show0 = true; "
				ref="item1"><!-- hideKeyboard() -->
				<u--input v-model="model1.userInfo.area" disabled disabledColor="#ffffff" placeholder="报修区域"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="详细地址" prop="userInfo.address" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.address" placeholder="请填写" border="none"></u--input>
			</u-form-item>

			<u-form-item label="故障类型" prop="userInfo.type" borderBottom @click="show1 = true; "
				ref="item1"><!-- hideKeyboard() -->
				<u--input v-model="model1.userInfo.type" disabled disabledColor="#ffffff" placeholder="报修区域"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>


			<u-form-item label="报修方式" prop="radiovalue1" borderBottom ref="item2">
				<u-radio-group v-model="model1.radiovalue1" placement="row" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name" @change="radioChange">
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="选择日期" prop="userInfo.data" borderBottom @click="showdata = true; "
				ref="item1"><!-- hideKeyboard() -->
				<u--input v-model="model1.userInfo.data" disabled disabledColor="#ffffff" placeholder="报修日期"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<!-- 
			<u-form-item label="上传故障图片">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="10"
					:previewFullImage="true"></u-upload>
			</u-form-item> -->
			<u-form-item label="上传故障图片">
				<view class="upload-container">
					<button @click="chooseImage">选择图片</button>
					<image v-if="imageUrl" :src="imageUrl" mode="aspectFit"></image>
					<button v-if="true" @click="uploadImage">上传图片</button>
				</view>
			</u-form-item>

			<u-form-item v-if="condition1" label="选择时间" prop="userInfo.time" borderBottom @click="show2 = true; "
				ref="item1"><!-- hideKeyboard() -->
				<u--input v-model="model1.userInfo.time" disabled disabledColor="#ffffff" placeholder="报修时间"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item v-if="condition2" label="选择时间" prop="userInfo.time" borderBottom @click="show3 = true; "
				ref="item1"><!-- hideKeyboard() -->
				<u--input v-model="model1.userInfo.time" disabled disabledColor="#ffffff" placeholder="报修时间"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<!-- 用户服务协议和隐私政策 -->

			<view class="agreement">
				<label>
					<checkbox v-model="agree" /> 我已阅读并同意
				</label>
				<a href="#" class="link" @click="gotoAgreement">苏应校园宽带小程序用户隐私保护说明</a>
			</view>
			
			
			<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>



		</u--form>

		<!-- <u-action-sheet class="u-action-sheet-content" :show="show0" :actions="actions" title="请选择区域" description="描述"
			@close="show0 = false" @select="areaSelect">
			
		</u-action-sheet> -->

		<u-picker :show="show0" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="cancelHandler"
			@change="changeHandler" @close="show0 = false">
		</u-picker>

		<u-action-sheet :show="show1" :actions="actions1" title="请选择xxx" description="描述" @close="show1 = false"
			@select="typeSelect">
		</u-action-sheet>

		<u-calendar :show="showdata" :mode="mode" @confirm="confirmdata"></u-calendar>

		<u-action-sheet :show="show2" :actions="actions2" title="请选择xxx" description="描述" @close="show2 = false"
			@select="timeSelect">
		</u-action-sheet>

		<u-action-sheet :show="show3" :actions="actions3" title="请选择xxx" description="描述" @close="show3 = false"
			@select="timeSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 'single',
				show0: false,
				show1: false,
				show2: false,
				show3: false,
				showdata: false,
				condition1: false,
				condition2: false,
				//图片
				fileList1: [],
				img1: '',
				imageUrl: null,
				file: null,
				agree: false,
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				],

				model1: {
					userInfo: {
						name: '',
						studentID: '',
						// sex: '',
						area: '',
						phone: '',
						address: '',
						type: '',
						data: '',
						time: '',
					},
					// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
					radiovalue1: '立即报修',
				},
				actions: [{
						name: '选项1',
					},
					{
						name: '选项2',
					},
					{
						name: '选项3',
					},


				],
				actions1: [{
						name: '网络1',
					},
					{
						name: '网络2',
					},
					{
						name: '网络3',
					},
					{
						name: '网络4',
					},
				],
				actions2: [{
						name: '男生时间xx-xxxxxx',
					},
					{
						name: '12:00-14:00',
					},
					{
						name: '14:00-16:00',
					},
					{
						name: '16:00-18:00',
					},

				],
				actions3: [{
						name: '女生时间xx-xxxxxx',
					},
					{
						name: '12:00-14:00',
					},
					{
						name: '14:00-16:00',
					},

				],
				// 基本案列数据
				radiolist1: [{
						name: '立即报修',
						disabled: false
					},
					{
						name: '预约报修',
						disabled: false
					},

				],



				rules: {
					'userInfo.name': {
						type: 'string',
						max: 8,
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.studentID': {
						type: 'string',
						required: true,
						message: '请填写学号',
						trigger: ['blur', 'change']
					},
					'userInfo.area': {
						type: 'string',
						required: true,
						message: '请选择地区',
						trigger: ['blur', 'change']
					},
					'userInfo.phone': {
						type: 'string',
						max: 14,
						required: true,
						message: '请xxxxxxx',
						trigger: ['blur', 'change']
					},
					'userInfo.addrss': {
						type: 'string',
						max: 50,
						required: true,
						message: '请xxxxxxx',
						trigger: ['blur', 'change']
					},
					'userInfo.type': {
						type: 'string',
						max: 50,
						required: true,
						message: '请xxxxxxx',
						trigger: ['blur', 'change']
					},
					'userInfo.time': {
						type: 'string',
						max: 20,
						required: true,
						message: '请xxxxxxx',
						trigger: ['blur', 'change']
					},



				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			// 用户点击确认按钮后，这里会被执行
			confirm(e) {
				const myarea = e.value.join()
				this.model1.userInfo.area = myarea
				this.show0 = false
				console.log(e.value)
			},
			cancelHandler() {
				// 用户点击取消按钮后，这里会被执行
				console.log('cancel');
			},

			confirmdata(e) {
				const mydata = e.join()
				console.log(e);
				this.model1.userInfo.data = mydata
				this.showdata = false

			},

			areaSelect(e) {
				this.model1.userInfo.area = e.area
				// this.$refs.uForm.validateField('userInfo.sex')
			},

			typeSelect(e) {
				this.model1.userInfo.type = e.name
				// this.$refs.uForm.validateField('userInfo.sex')
			},
			timeSelect(e) {
				this.model1.userInfo.time = e.name
				// this.$refs.uForm.validateField('userInfo.sex')
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},


			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				var arry = []
				this.fileList1.filter((v, i) => {
					arry.push(v.url)
				})
				this.img1 = arry
				console.log(this.img1, "1");

			},
			// 新增图片
			// async afterRead(event) {
			// 	// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			// 	let lists = [].concat(event.file)
			// 	let fileListLen = this[`fileList${event.name}`].length

			// 	lists.map((item) => {
			// 		this[`fileList${event.name}`].push({
			// 			...item,
			// 			status: 'uploading',
			// 			message: '上传中'
			// 		})
			// 	})
			// 	for (let i = 0; i < lists.length; i++) {
			// 		const result = await this.uploadFilePromise(lists[i].url)
			// 		let item = this[`fileList${event.name}`][fileListLen]
			// 		this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
			// 			status: 'success',
			// 			message: '',
			// 			url: result
			// 		}))
			// 		fileListLen++
			// 	}
			// 	var arry = []
			// 	this.fileList1.filter((v, i) => {
			// 		arry.push(v.url)
			// 	})
			// 	this.img1 = arry
			// 	console.log(this.img1, "1");

			// },
			// uploadFilePromise(url) {
			// 	return new Promise((resolve, reject) => {
			// 		let a = uni.uploadFile({
			// 			url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
			// 			filePath: url,
			// 			name: 'file',
			// 			formData: {
			// 				user: 'test'
			// 			},
			// 			success: (res) => {
			// 				setTimeout(() => {
			// 					resolve(JSON.parse(res.data).data)
			// 				}, 1000)
			// 			}
			// 		});
			// 	})
			// },
			submit() {
				// 处理提交表单的逻辑
				console.log(this.model1.userInfo.name);
				console.log(this.model1.userInfo.studentID);
				console.log(this.model1.userInfo.area);
				console.log(this.model1.userInfo.phone);
				console.log(this.model1.userInfo.address);
				console.log(this.model1.userInfo.type);
				console.log(this.model1.userInfo.data);
				console.log(this.model1.userInfo.time);

			},
			chooseImage() {
				uni.chooseImage({
					success: (res) => {
						this.imageUrl = res.tempFilePaths[0];
						this.file = res.tempFiles[0];
					},
				});
			},
			uploadImage() {
				console.log(this.file)
				console.log(this.imageUrl)
				uni.uploadFile({
					url: 'YOUR_UPLOAD_URL',
					filePath: this.file.path,
					name: 'image',
					formData: {
						// 添加额外的上传参数
						// 如果有需要的话
					},
					success: (res) => {
						// 处理上传成功的结果
					},
					fail: (err) => {
						// 处理上传失败的结果
					},
				});
			},
			// 跳转到用户服务协议页面
			gotoAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				})
			},
			



		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style>
	.u-action-sheet-content {
		height: 20px;
		max-height: 30%;
		overflow-y: auto;
	}

	.upload-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>